
import React from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
// 路由hooks导入
import { useHistory } from 'react-router-dom'
// api
import apiServe from '../../api/apiServer'
// 导入公用方法
import { setToken } from '../../api/storage'
// 样式导入
import styles from './index.module.css'
export default function Login () {
    // 路由修改
    const history = useHistory()
    // 表单提交
    const onFinish =async (values) => {
        let res = await apiServe.getlogin({ username: values.username, password: values.password })
        const { status, description,body } = res
        if (status === 200) {
            setToken(body.token)
            Toast.show({
                icon: 'success',
                duration: 500,
				content: description,
			})
            setTimeout(() => {
                history.push('/')
            }, 500);
        } else {
            Toast.show({
				icon: 'error',
				duration: 500,
				content: description,
			})
        }

    }
    // 立即注册
    const register = () => {
        console.log(99999)
        history.push('/register')
    }
    return (
		<div className={styles.page}>
			<div className={styles.Login}>
				<Form
					onFinish={onFinish}
					footer={
						<Button block type='submit' color='success'>
							立即登录
						</Button>
					}
				>
					<Form.Item name='username' label='账号' rules={[{ required: true, message: '账号不能为空' }]}>
						<Input  placeholder='请输入姓名' />
					</Form.Item>
					<Form.Item name='password' label='密码' rules={[{ required: true, message: '密码不能为空' }]}>
						<Input  placeholder='请输入地址' type='password' />
					</Form.Item>
				</Form>
			</div>
			{/* 暂无账号立即注册 */}
			<p onClick={register} style={{ textAlign: 'center' }}>
				暂无账号，立即注册
			</p>
		</div>
	)
}